<template>
  <div class="home">
    <!-- 轮播图区域 -->
    <section class="banner-section">
      <div class="container">
        <div class="banner-wrapper">
          <!-- 左侧分类菜单容器 -->
          <div class="category-container">
            <!-- 分类侧边栏 -->
            <div
              class="category-sidebar"
              :class="{ expanded: isCategoryExpanded }"
              @mouseenter="expandCategoryMenu"
              @mouseleave="collapseCategoryMenu"
            >
              <div
                v-for="category in topCategories"
                :key="category.id"
                class="category-item"
                @click="navigateToCategory(category.id)"
                @mouseenter="showSubCategories(category)"
                @mouseleave="hideSubCategories"
              >
                <img v-if="category.icon" :src="category.icon" :alt="category.name" class="category-icon" />
                <span>{{ category.name }}</span>
                <span class="arrow-icon">›</span>
              </div>
            </div>

            <!-- 悬浮菜单 - 移到sidebar外面 -->
            <div
              v-if="hoveredCategory && hoveredCategory.children?.length"
              class="sub-category-menu"
              @mouseenter="cancelHide(); cancelCollapseMenu()"
              @mouseleave="hideSubCategories(); collapseCategoryMenu()"
            >
              <div class="sub-category-container">
                <div
                  v-for="subCategory in hoveredCategory.children"
                  :key="subCategory.id"
                  class="sub-category-section"
                >
                  <div
                    class="sub-category-title"
                    @click.stop="navigateToCategory(subCategory.id)"
                  >
                    {{ subCategory.name }}
                  </div>

                  <!-- 三级分类 -->
                  <div v-if="subCategory.children?.length" class="third-category-grid">
                    <div
                      v-for="thirdCategory in subCategory.children"
                      :key="thirdCategory.id"
                      class="third-category-item"
                      @click.stop="navigateToCategory(thirdCategory.id)"
                    >
                      <img
                        v-if="thirdCategory.image"
                        :src="thirdCategory.image"
                        :alt="thirdCategory.name"
                        class="third-category-image"
                        @error="handleImageError"
                      />
                      <span class="third-category-name">{{ thirdCategory.name }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 主轮播图 -->
          <div class="main-banner">
            <Banner
              :position="1"
              height="400px"
              :autoplay="true"
              :interval="4000"
              arrow="hover"
              indicator-position="outside"
              @banner-click="handleBannerClick"
            />
          </div>
        </div>
      </div>
    </section>

    <!-- 快捷导航区域 -->
    <section class="shortcut-section">
      <div class="container">
        <div class="shortcut-grid">
          <div
            v-for="shortcut in shortcuts"
            :key="shortcut.id"
            class="shortcut-item"
            @click="handleShortcutClick(shortcut)"
          >
            <div class="shortcut-icon">
              <img :src="shortcut.image" :alt="shortcut.title" />
            </div>
            <span class="shortcut-label">{{ shortcut.title }}</span>
          </div>
        </div>
      </div>
    </section>

    <!-- 为你推荐 -->
    <section class="recommended-section">
      <div class="container">
        <div class="section-header">
          <h2>为你推荐</h2>
          <router-link to="/products?type=recommended" class="more-link">
            查看更多 <el-icon><ArrowRight /></el-icon>
          </router-link>
        </div>

        <!-- 商品网格 -->
        <div class="product-grid" v-loading="loading">
          <div
            v-for="product in recommendedProducts"
            :key="product.id"
            class="product-card"
            @click="$router.push(`/product/${product.id}`)"
          >
            <div class="product-image">
              <img
                :src="product.images?.[0] || '/placeholder.svg'"
                :alt="product.name"
                @error="handleImageError"
              />
              <div v-if="product.discount > 0" class="discount-badge">
                {{ product.discount }}折
              </div>
            </div>
            <div class="product-info">
              <h3 class="product-name">{{ product.name }}</h3>
              <p class="product-desc">{{ product.description }}</p>
              <div class="product-price">
                <span class="current-price">¥{{ product.price }}</span>
                <span v-if="product.originalPrice" class="original-price">
                  ¥{{ product.originalPrice }}
                </span>
              </div>
              <div class="product-tags">
                <span v-if="product.isNew" class="tag">新品</span>
                <span v-if="product.isHot" class="tag">热销</span>
                <span v-for="tag in product.tags" :key="tag" class="tag">{{ tag }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 新品上市 -->
    <section class="new-products-section">
      <div class="container">
        <div class="section-header">
          <h2>新品上市</h2>
          <router-link to="/products?type=new" class="more-link">
            查看更多 <el-icon><ArrowRight /></el-icon>
          </router-link>
        </div>

        <!-- 商品网格 -->
        <div class="product-grid" v-loading="loadingNew">
          <div
            v-for="product in newProducts"
            :key="product.id"
            class="product-card"
            @click="$router.push(`/product/${product.id}`)"
          >
            <div class="product-image">
              <img
                :src="product.images?.[0] || '/placeholder.svg'"
                :alt="product.name"
                @error="handleImageError"
              />
              <div v-if="product.discount > 0" class="discount-badge">
                {{ product.discount }}折
              </div>
              <div class="new-badge">新品</div>
            </div>
            <div class="product-info">
              <h3 class="product-name">{{ product.name }}</h3>
              <p class="product-desc">{{ product.description }}</p>
              <div class="product-price">
                <span class="current-price">¥{{ product.price }}</span>
                <span v-if="product.originalPrice" class="original-price">
                  ¥{{ product.originalPrice }}
                </span>
              </div>
              <div class="product-tags">
                <span v-if="product.isNew" class="tag">新品</span>
                <span v-if="product.isHot" class="tag">热销</span>
                <span v-for="tag in product.tags" :key="tag" class="tag">{{ tag }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 热销爆款 -->
    <section class="hot-products-section">
      <div class="container">
        <div class="section-header">
          <h2>热销爆款</h2>
          <router-link to="/products?type=hot" class="more-link">
            查看更多 <el-icon><ArrowRight /></el-icon>
          </router-link>
        </div>

        <!-- 商品网格 -->
        <div class="product-grid" v-loading="loadingHot">
          <div
            v-for="product in hotProducts"
            :key="product.id"
            class="product-card"
            @click="$router.push(`/product/${product.id}`)"
          >
            <div class="product-image">
              <img
                :src="product.images?.[0] || '/placeholder.svg'"
                :alt="product.name"
                @error="handleImageError"
              />
              <div v-if="product.discount > 0" class="discount-badge">
                {{ product.discount }}折
              </div>
              <div class="hot-badge">热销</div>
            </div>
            <div class="product-info">
              <h3 class="product-name">{{ product.name }}</h3>
              <p class="product-desc">{{ product.description }}</p>
              <div class="product-price">
                <span class="current-price">¥{{ product.price }}</span>
                <span v-if="product.originalPrice" class="original-price">
                  ¥{{ product.originalPrice }}
                </span>
              </div>
              <div class="product-tags">
                <span v-if="product.isNew" class="tag">新品</span>
                <span v-if="product.isHot" class="tag">热销</span>
                <span v-for="tag in product.tags" :key="tag" class="tag">{{ tag }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 品牌专区 -->
    <section class="brand-section">
      <div class="container">

      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  ArrowRight,
  Timer,
  UserFilled,
  Ticket,
  CreditCard,
  RefreshRight,
  Phone
} from '@element-plus/icons-vue'
import Banner from '@/components/Banner.vue'
import CategoryGrid from '@/components/CategoryGrid.vue'
import { categoryApi, type Category } from '@/api/category'
import { productApi, type Product } from '@/api/product'
import { bannerApi, type Banner as BannerType } from '@/api/banner'

const router = useRouter()

// 响应式数据
const topCategories = ref<Category[]>([])
const hoveredCategory = ref<Category | null>(null)
const isCategoryExpanded = ref(false) // 控制分类菜单是否展开
const recommendedProducts = ref<Product[]>([])
const newProducts = ref<Product[]>([])
const hotProducts = ref<Product[]>([])
const brands = ref<any[]>([])
const shortcuts = ref<BannerType[]>([])
const loading = ref(false)
const loadingNew = ref(false)
const loadingHot = ref(false)
const currentPage = ref(1)

// 获取顶级分类
const fetchTopCategories = async () => {
  try {
    const response = await categoryApi.getCategoryTree()
    if (response.code === 200) {
      topCategories.value = response.data?.slice(0, 10) || []
    }
  } catch (error) {
    console.error('获取分类失败:', error)
  }
}

// 获取快捷入口数据
const fetchShortcuts = async () => {
  try {
    const response = await bannerApi.getBannersByPosition(2)
    shortcuts.value = response.data?.banners || []
  } catch (error) {
    console.error('获取快捷入口失败:', error)
  }
}

// 获取为你推荐商品
const fetchRecommendedProducts = async () => {
  try {
    loading.value = true

    // 模拟商品数据，当API不可用时使用
    const mockProducts: Product[] = [
      {
        id: 1,
        name: '小米13 Pro 5G智能手机',
        description: '徕卡专业光学镜头，骁龙8 Gen2处理器，120W快充',
        price: 4999,
        originalPrice: 5999,
        image: '/placeholder.svg',
        images: ['/placeholder.svg'],
        categoryId: 1,
        stock: 100,
        sales: 1234,
        status: 'active',
        createdAt: '2024-01-01T00:00:00Z',
        updatedAt: '2024-01-01T00:00:00Z',
        isNew: true,
        isHot: true,
        discount: 8.3,
        tags: ['5G', '徕卡']
      },
      {
        id: 2,
        name: 'Redmi Note 12 Turbo',
        description: '高通骁龙7+ Gen2，67W快充，5000mAh大电池',
        price: 1999,
        originalPrice: 2299,
        image: '/placeholder.svg',
        images: ['/placeholder.svg'],
        categoryId: 1,
        stock: 200,
        sales: 2345,
        status: 'active',
        createdAt: '2024-01-02T00:00:00Z',
        updatedAt: '2024-01-02T00:00:00Z',
        isHot: true,
        discount: 8.7
      },
      {
        id: 3,
        name: 'Xiaomi Buds 4 Pro',
        description: '主动降噪，空间音频，30小时续航',
        price: 999,
        originalPrice: 1299,
        image: '/placeholder.svg',
        images: ['/placeholder.svg'],
        categoryId: 2,
        stock: 150,
        sales: 876,
        status: 'active',
        createdAt: '2024-01-03T00:00:00Z',
        updatedAt: '2024-01-03T00:00:00Z',
        isNew: true,
        discount: 7.7
      },
      {
        id: 4,
        name: '小米手环7 Pro',
        description: '1.64英寸AMOLED大屏，GPS定位，117种运动模式',
        price: 399,
        originalPrice: 499,
        image: '/placeholder.svg',
        images: ['/placeholder.svg'],
        categoryId: 3,
        stock: 300,
        sales: 3456,
        status: 'active',
        createdAt: '2024-01-04T00:00:00Z',
        updatedAt: '2024-01-04T00:00:00Z',
        isHot: true,
        discount: 8.0
      }
    ]

    try {
      const response = await productApi.getRecommendedProducts(8)
      if (response.code === 200) {
        recommendedProducts.value = response.data || []
      } else {
        recommendedProducts.value = mockProducts.slice(0, 4)
      }
    } catch (error) {
      console.error('获取推荐商品失败:', error)
      recommendedProducts.value = mockProducts.slice(0, 4)
    }
  } catch (error) {
    console.error('获取推荐商品失败:', error)
  } finally {
    loading.value = false
  }
}

// 获取新品上市商品
const fetchNewProducts = async () => {
  try {
    loadingNew.value = true

    // 模拟新品数据
    const mockNewProducts: Product[] = [
      {
        id: 7,
        name: '小米14 Ultra',
        description: '徕卡全明星四摄，骁龙8 Gen3，5300mAh大电池',
        price: 6499,
        originalPrice: 6999,
        image: '/placeholder.svg',
        images: ['/placeholder.svg'],
        categoryId: 1,
        stock: 80,
        sales: 123,
        status: 'active',
        createdAt: '2024-02-01T00:00:00Z',
        updatedAt: '2024-02-01T00:00:00Z',
        isNew: true,
        discount: 9.3,
        tags: ['新品', '徕卡']
      },
      {
        id: 8,
        name: 'Redmi K70 Pro',
        description: '骁龙8 Gen3，2K直屏，120W快充',
        price: 3299,
        originalPrice: 3699,
        image: '/placeholder.svg',
        images: ['/placeholder.svg'],
        categoryId: 1,
        stock: 120,
        sales: 456,
        status: 'active',
        createdAt: '2024-02-02T00:00:00Z',
        updatedAt: '2024-02-02T00:00:00Z',
        isNew: true,
        discount: 8.9,
        tags: ['新品', '游戏']
      },
      {
        id: 9,
        name: 'Xiaomi Watch S3',
        description: '1.43英寸AMOLED屏，eSIM独立通话，150+运动模式',
        price: 1299,
        originalPrice: 1499,
        image: '/placeholder.svg',
        images: ['/placeholder.svg'],
        categoryId: 3,
        stock: 90,
        sales: 78,
        status: 'active',
        createdAt: '2024-02-03T00:00:00Z',
        updatedAt: '2024-02-03T00:00:00Z',
        isNew: true,
        discount: 8.7,
        tags: ['新品', '智能手表']
      },
      {
        id: 10,
        name: '米家扫拖机器人2 Pro',
        description: 'AI识别避障，4000Pa大吸力，电解水杀菌',
        price: 1999,
        originalPrice: 2499,
        image: '/placeholder.svg',
        images: ['/placeholder.svg'],
        categoryId: 4,
        stock: 60,
        sales: 234,
        status: 'active',
        createdAt: '2024-02-04T00:00:00Z',
        updatedAt: '2024-02-04T00:00:00Z',
        isNew: true,
        discount: 8.0,
        tags: ['新品', '智能家居']
      }
    ]

    try {
      const response = await productApi.getProducts({ isNew: 1, limit: 8 })
      if (response.code === 200) {
        newProducts.value = response.data?.list || []
      } else {
        newProducts.value = mockNewProducts
      }
    } catch (error) {
      console.error('获取新品失败:', error)
      newProducts.value = mockNewProducts
    }
  } catch (error) {
    console.error('获取新品失败:', error)
  } finally {
    loadingNew.value = false
  }
}

// 获取热销爆款商品
const fetchHotProducts = async () => {
  try {
    loadingHot.value = true

    // 模拟热销数据
    const mockHotProducts: Product[] = [
      {
        id: 11,
        name: '小米电视EA55',
        description: '55英寸4K超高清，远场语音，金属全面屏',
        price: 2199,
        originalPrice: 2699,
        image: '/placeholder.svg',
        images: ['/placeholder.svg'],
        categoryId: 5,
        stock: 200,
        sales: 5678,
        status: 'active',
        createdAt: '2023-12-01T00:00:00Z',
        updatedAt: '2023-12-01T00:00:00Z',
        isHot: true,
        discount: 8.1,
        tags: ['热销', '4K']
      },
      {
        id: 12,
        name: 'Redmi Note 11T Pro',
        description: '天玑8100，67W快充，144Hz LCD屏',
        price: 1599,
        originalPrice: 1899,
        image: '/placeholder.svg',
        images: ['/placeholder.svg'],
        categoryId: 1,
        stock: 300,
        sales: 4321,
        status: 'active',
        createdAt: '2023-11-01T00:00:00Z',
        updatedAt: '2023-11-01T00:00:00Z',
        isHot: true,
        discount: 8.4,
        tags: ['热销', '游戏']
      },
      {
        id: 13,
        name: '小米手环8 Pro',
        description: '1.74英寸AMOLED大屏，独立GPS，150+运动模式',
        price: 299,
        originalPrice: 399,
        image: '/placeholder.svg',
        images: ['/placeholder.svg'],
        categoryId: 3,
        stock: 500,
        sales: 8765,
        status: 'active',
        createdAt: '2023-10-01T00:00:00Z',
        updatedAt: '2023-10-01T00:00:00Z',
        isHot: true,
        discount: 7.5,
        tags: ['热销', '性价比']
      },
      {
        id: 14,
        name: '米家无线吸尘器2 Pro',
        description: '190AW大吸力，可换电池，LCD显示屏',
        price: 1499,
        originalPrice: 1999,
        image: '/placeholder.svg',
        images: ['/placeholder.svg'],
        categoryId: 4,
        stock: 150,
        sales: 3456,
        status: 'active',
        createdAt: '2023-09-01T00:00:00Z',
        updatedAt: '2023-09-01T00:00:00Z',
        isHot: true,
        discount: 7.5,
        tags: ['热销', '清洁神器']
      }
    ]

    try {
      const response = await productApi.getHotProducts(8)
      if (response.code === 200) {
        hotProducts.value = response.data || []
      } else {
        hotProducts.value = mockHotProducts
      }
    } catch (error) {
      console.error('获取热销商品失败:', error)
      hotProducts.value = mockHotProducts
    }
  } catch (error) {
    console.error('获取热销商品失败:', error)
  } finally {
    loadingHot.value = false
  }
}

// 获取品牌数据
const fetchBrands = async () => {
  try {
    // 模拟品牌数据
    brands.value = [
      {
        id: 1,
        name: '小米',
        logo: '/brands/xiaomi.svg',
        description: '让全球每个人都能享受科技带来的美好生活'
      },
      {
        id: 2,
        name: '华为',
        logo: '/placeholder.svg',
        description: '构建万物互联的智能世界'
      },
      {
        id: 3,
        name: '苹果',
        logo: '/placeholder.svg',
        description: '创新改变世界'
      },
      {
        id: 4,
        name: '三星',
        logo: '/placeholder.svg',
        description: '开启智能生活新时代'
      }
    ]
  } catch (error) {
    console.error('获取品牌失败:', error)
  }
}

// 显示子分类
const showSubCategories = (category: Category) => {
  cancelHide() // 取消任何待执行的隐藏操作
  hoveredCategory.value = category
}

// 隐藏子分类
let hideTimer: NodeJS.Timeout | null = null

const hideSubCategories = () => {
  hideTimer = setTimeout(() => {
    hoveredCategory.value = null
  }, 300) // 增加到300毫秒
}

const cancelHide = () => {
  if (hideTimer) {
    clearTimeout(hideTimer)
    hideTimer = null
  }
}

// 导航到分类页面
const navigateToCategory = (categoryId: number) => {
  router.push(`/products?categoryId=${categoryId}`)
}

// 展开分类菜单
const expandCategoryMenu = () => {
  cancelHide() // 取消任何待执行的隐藏操作
  cancelCollapseMenu() // 取消菜单收起操作
  isCategoryExpanded.value = true
}

// 收起分类菜单
let collapseTimer: NodeJS.Timeout | null = null

const collapseCategoryMenu = () => {
  collapseTimer = setTimeout(() => {
    isCategoryExpanded.value = false
    hoveredCategory.value = null // 同时隐藏悬浮菜单
  }, 300) // 300毫秒延迟
}

const cancelCollapseMenu = () => {
  if (collapseTimer) {
    clearTimeout(collapseTimer)
    collapseTimer = null
  }
}

// 处理轮播图点击
const handleBannerClick = (banner: any) => {
  if (banner.link) {
    window.open(banner.link, '_blank')
  }
}

// 处理快捷入口点击
const handleShortcutClick = (shortcut: BannerType) => {
  if (shortcut.linkUrl) {
    if (shortcut.linkUrl.startsWith('http')) {
      // 外部链接
      window.open(shortcut.linkUrl, '_blank')
    } else {
      // 内部路由
      router.push(shortcut.linkUrl)
    }
  }
}

// 处理分类点击
const handleCategoryClick = (category: Category) => {
  router.push(`/products?categoryId=${category.id}`)
}



// 处理图片加载错误
const handleImageError = (event: Event) => {
  const target = event.target as HTMLImageElement
  target.src = '/placeholder.svg'
}

// 组件挂载时初始化
onMounted(() => {
  fetchTopCategories()
  fetchShortcuts()
  fetchRecommendedProducts()
  fetchNewProducts()
  fetchHotProducts()
  fetchBrands()
})
</script>

<style scoped>
.home {
  background: #f5f5f5;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 轮播图区域 */
.banner-section {
  background: white;
  padding: 20px 0;
}

.banner-wrapper {
  display: flex;
  gap: 20px;
  height: 400px;
}

.category-container {
  position: relative;
  width: 200px;
}

.category-sidebar {
  width: 200px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
  height: 400px; /* 默认高度与轮播图相同 */
  transition: height 0.3s ease-in-out;
}

.category-sidebar.expanded {
  height: auto; /* 展开时显示全部内容 */
  max-height: 600px; /* 设置最大高度避免过长 */
}

.category-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 20px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.3s;
  position: relative;
}

.category-item:hover {
  background: #ff6700;
  color: white;
}

.category-icon {
  width: 20px;
  height: 20px;
}

.arrow-icon {
  margin-left: auto;
  font-size: 12px;
}

.sub-category-menu {
  position: absolute;
  left: 200px;
  top: 0;
  width: 600px;
  max-height: 400px;
  background: white;
  border: 1px solid #e0e0e0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  padding: 20px;
  z-index: 1000;
  overflow-y: auto;
}

.sub-category-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sub-category-section {
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 15px;
}

.sub-category-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.sub-category-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
  cursor: pointer;
  transition: color 0.3s;
}

.sub-category-title:hover {
  color: #ff6700;
}

.third-category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

.third-category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;
}

.third-category-item:hover {
  background: #f5f5f5;
  transform: translateY(-2px);
}

.third-category-image {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
}

.third-category-name {
  font-size: 12px;
  color: #333;
  line-height: 1.2;
}

.main-banner {
  flex: 1;
  border-radius: 8px;
  overflow: hidden;
}

.quick-access {
  width: 160px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quick-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s;
}

.quick-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.quick-item img {
  width: 32px;
  height: 32px;
}

.quick-item span {
  font-size: 12px;
  color: #333;
}

/* 快捷导航区域 */
.shortcut-section {
  padding: 30px 0;
  background: white;
}

.shortcut-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.shortcut-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: transform 0.3s;
}

.shortcut-item:hover {
  transform: translateY(-3px);
}

.shortcut-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #f5f5f5;
}

.shortcut-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.shortcut-label {
  font-size: 14px;
  color: #333;
  text-align: center;
  font-weight: 500;
}

.shortcut-icon.seckill { background: linear-gradient(135deg, #ff6b6b, #ff8e8e); }
.shortcut-icon.group-buy { background: linear-gradient(135deg, #4ecdc4, #44a08d); }
.shortcut-icon.f-code { background: linear-gradient(135deg, #45b7d1, #96c93d); }
.shortcut-icon.mi-card { background: linear-gradient(135deg, #f093fb, #f5576c); }
.shortcut-icon.trade-in { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.shortcut-icon.recharge { background: linear-gradient(135deg, #43e97b, #38f9d7); }

.shortcut-item span {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

/* 通用区域样式 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.section-header h2 {
  font-size: 24px;
  color: #333;
  margin: 0;
}

.more-link {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #666;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s;
}

.more-link:hover {
  color: #ff6700;
}

/* 热门分类区域 */
.hot-categories-section {
  padding: 30px 0;
}

/* 推荐商品区域 */
.recommended-section {
  padding: 30px 0;
  background: white;
}

.filter-tabs {
  display: flex;
  gap: 30px;
}

.tab-item {
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  color: #666;
  transition: all 0.3s;
}

.tab-item.active,
.tab-item:hover {
  background: #ff6700;
  color: white;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.product-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.product-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.product-card:hover .product-image img {
  transform: scale(1.05);
}

.discount-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #ff4757;
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
}

.new-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #2ed573;
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
}

.hot-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #ffa502;
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
}

.product-info {
  padding: 20px;
}

.product-name {
  font-size: 16px;
  color: #333;
  margin: 0 0 8px 0;
  font-weight: 600;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-desc {
  font-size: 14px;
  color: #666;
  margin: 0 0 12px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-price {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.current-price {
  font-size: 18px;
  color: #ff6700;
  font-weight: bold;
}

.original-price {
  font-size: 14px;
  color: #999;
  text-decoration: line-through;
}

.product-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag {
  padding: 2px 8px;
  background: #f0f0f0;
  color: #666;
  border-radius: 10px;
  font-size: 12px;
}

.load-more {
  text-align: center;
}

/* 新品上市区域 */
.new-products-section {
  padding: 30px 0;
  background: white;
}

.new-products-section .section-header h2 {
  color: #333;
}

/* 热销爆款区域 */
.hot-products-section {
  padding: 30px 0;
  background: white;
}

.hot-products-section .section-header h2 {
  color: #333;
}

/* 品牌专区 */
.brand-section {
  padding: 30px 0;
}

.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.brand-card {
  background: white;
  padding: 30px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s;
}

.brand-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.brand-card img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  margin-bottom: 15px;
}

.brand-card h4 {
  font-size: 18px;
  color: #333;
  margin: 0 0 10px 0;
}

.brand-card p {
  font-size: 14px;
  color: #666;
  margin: 0;
  line-height: 1.4;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .banner-wrapper {
    flex-direction: column;
    height: auto;
  }

  .category-sidebar {
    width: 100%;
    height: auto;
  }

  .quick-access {
    width: 100%;
    flex-direction: row;
    justify-content: space-around;
  }

  .shortcut-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 15px;
  }

  .shortcut-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding: 20px;
  }

  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 15px;
  }

  .brand-grid {
    grid-template-columns: 1fr;
  }

  .filter-tabs {
    gap: 15px;
    overflow-x: auto;
    padding-bottom: 10px;
  }

  .tab-item {
    white-space: nowrap;
  }
}
</style>
